| Js动态监听listen dom变化(支持WebView)并作出处理 | 您所在的位置：网站首页 › js 修改dom内容 › Js动态监听listen dom变化(支持WebView)并作出处理 |
Js动态监听listen dom变化(支持WebView)并作出处理
我的图书馆
查看信箱
系统消息
官方通知
设置
开始对话
有11人和你对话，查看 忽略
历史对话记录
通知设置
留言交流
请选择搜索范围 含 的文章 含 的书籍 含 的随笔昵称57256554 / JavaScript / Js动态监听listen dom变化(支持WebView)并... 转Word 全屏 打印 修改 转藏+1 分享 QQ空间 QQ好友 新浪微博 微信扫一扫 × 00:00选择朗读音色 亲切女声 稳重女声 成熟男声 选择朗读倍速 0.75倍 1倍 1.5倍 选择循环方式 单篇循环 
Js动态监听listen dom变化(支持WebView)并作出处理
2018-06-28
昵称57256...
展开全文
Js代码 // Firefox和Chrome早期版本中带有前缀 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver // 选择目标节点 var target = document.querySelector('#some-id'); // 创建观察者对象 var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation.type); }); }); // 配置观察选项: var config = { attributes: true, childList: true, characterData: true } // 传入目标节点和观察选项 observer.observe(target, config); // 随后,你还可以停止观察 observer.disconnect();
实例方法 void observe( Node target, optional MutationObserverInit options ); void disconnect(); Array takeRecords(); MutationObserverInit MutationObserverInit是一个用来配置观察者对象行为的对象,该对象可以拥有下面这些属性: 注: childList, attributes, 或者characterData三个属性中必须至少有一个为true.否则,会抛出异常"An invalid or illegal string was specified". 属性 描述 childList 如果需要观察目标节点的子节点(新增了某个子节点,或者移除了某个子节点),则设置为true. attributes 如果需要观察目标节点的属性节点(新增或删除了某个属性,以及某个属性的属性值发生了变化),则设置为true. characterData 如果目标节点为characterData节点(一种抽象接口,具体可以为文本节点,注释节点,以及处理指令节点)时,也要观察该节点的文本内容是否发生变化,则设置为true. subtree 除了目标节点,如果还需要观察目标节点的所有后代节点(观察目标节点所包含的整棵DOM树上的上述三种节点变化),则设置为true. attributeOldValue在attributes属性已经设为true的前提下,如果需要将发生变化的属性节点之前的属性值记录下来(记录到下面MutationRecord对象的oldValue属性中),则设置为true. characterDataOldValue 在characterData属性已经设为true的前提下,如果需要将发生变化的characterData节点之前的文本内容记录下来(记录到下面MutationRecord对象的oldValue属性中),则设置为true. attributeFilter 一个属性名数组(不需要指定命名空间),只有该数组中包含的属性名发生变化时才会被观察到,其他名称的属性发生变化后会被忽略. 测试实例： Java代码 // Chrom Console 监听 title变化 new MutationObserver(function(mutations) { console.log(document.title); mutations.forEach(function(mutation) { console.log(mutation.type); }); }).observe(document.querySelector('title'), { attributes: true, childList: true, characterData: true }); // 每当title节点变化，console以下结果 // 焦点之中的万能险：资金错配与被动加杠杆（标题） // childList（mutation.type）
api：https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver QQ空间 QQ好友 新浪微博 微信扫一扫 赞赏
共11人赞赏
本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
转藏到我的图书馆
献花（0）
+1
来自： 昵称57256554 > 《JavaScript》 举报推一荐：发原创得奖金，“原创奖励计划”来了！
猜你喜欢 0条评论 发表 请遵守用户 评论公约 查看更多评论
类似文章
更多
HTML5新特性之Mutation Observer Mutation Observer（变动观察器）是监视DOM变动的接口。Mutation Observer则是异步触发，DOM发生变动以后，并不会马上触发，而是要等到当前所有DOM操作都结束后才触发。上面代码首先指定，所要观察的DO...  chrome调试工具常用功能整理 dom mutation event 是 DOM3 添加的新的事件, 一般是 dom 结构改变时触发. devtools 可以对 DOMSubtreeModified DOMAttrModified 和 DOM... 常见的原生javascript DOM操作 2 3 4parentNod...  一个人的逆袭，必须要抓住这三个时机 一个人的逆袭，必须要抓住这三个时机。她第一次演讲摸不到头绪，不会讲，又紧张，在勉强晋级之后，她研究了市面上几乎所有教人演讲的书...  树形接口带复选框 title: "节点1", value: "jd1", data: [ { title: "节点1.1", checked: true, disabled: true, value: &...  JavaScript学习 var arr = [1, 2, null, "abc", true];let user = { ''''''''name'''''...  jQuery 中，函数 attr 与 prop 间的区别 2. 并不是所有的attribute与对应的property名字都一致，比如刚才使用的attribute 的class属性，使用property操作的时候应该是这样classN... DOM中监听节点变化的事件(变动事件)的用法 DOM中监听节点变化的事件(变动事件)的用法DOM变动事件的用法。首先触发DOMInserted事件，它对应的event对象中的target属性为添加的节点，relateNode属性对应被添加节点的父节点。其次触发的是DOMNodeIn...  clientHeight , scrollHeight , offsetHeight -> 文档大小console.log(document.documentElement.clientHeight); -> 文档大小 （三个值相同，包含滚动条）console.log(document...  Chrome控制台的妙用之使用XPATH Chrome控制台的妙用之使用XPATH.简单的说下这个xpath，//表示的是不管前面多少级都匹配（包含一级），/是只匹配一级 ，@符号表示的是取... 
昵称57256554
¥.00 微信或支付宝扫码支付： 开通即同意《个图VIP服务协议》 正在支付中，请勿关闭二维码！ 微信支付后，该微信自动注册为你的个人图书馆账号 付费成功，还是不能使用？ 复制成功！ 绑定帐号，享受特权 恭喜你成为个图VIP！ 在打印前，点击“下一步”观看2个提示 下一步 全部>> ● 电子书免费读 ● 全站无广告 ● 全屏阅读 ● 高品质朗读 ● 批量上传文档 ● 购书5折 ● 5千个文件夹 ● 专属客服微信支付查找“商户单号”方法： 1.打开微信app，点击消息列表中和“微信支付”的对话 2.找到扫码支付给360doc个人图书馆的账单，点击“查看账单详情” 3.在“账单详情”页，找到“商户单号” 4.将“商户单号”填入下方输入框，点击“恢复VIP特权”，等待系统校验完成即可。 支付宝查找“商户订单号”方法： 1.打开支付宝app，点击“我的”-“账单” 2.找到扫码支付给个人图书馆的账单，点击进入“账单详情”页 3.在“账单详情”页，找到“商家订单号” 4.将“商家订单号”填入下方输入框，点击“恢复VIP特权”，等待系统校验完成即可。 已经开通VIP，还是不能打印？ 请通过以下步骤，尝试恢复VIP特权 第1步在下方输入你支付的微信“商户单号”或支付宝“商家订单号” 第2步点击“恢复VIP特权”，等待系统校验完成即可 如何查找商户单号？ 恢复VIP特权正在查询... 订单号过期！ 该订单于2020/09/09 23:59:59支付，VIP有效期：2020/09/09 23:59:59至2020/09/11 23:59:59！如需使用VIP功能，建议重新开通VIP 返回上一页支付成功！ 确定已获得“发送到手机”权限！ 微信扫码，在手机上查看选中内容 全部>> ● 电子书免费读 ● 全站无广告 ● 全屏阅读 ● 高品质朗读 ● 批量上传文档 ● 购书5折 ● 5千个文件夹 ● 专属客服确定复制刚才选中的内容？ 确定 复制 打印文章 发送到手机微信扫码，在手机上查看选中内容 全屏阅读 朗读全文 分享文章 QQ空间 QQ好友 新浪微博 微信扫一扫 复制 打印文章 发送到手机微信扫码，在手机上查看选中内容 全屏阅读 朗读全文 × ×复制成功！ ¥.00 微信或支付宝扫码支付： 开通即同意《个图VIP服务协议》 正在支付中，请勿关闭二维码！ 自动续费¥12/月，可随时取消 开通即同意《连续订阅服务协议》|《个图VIP服务协议》 全部>> ● 电子书免费读 ● 全站无广告 ● 全屏阅读 ● 高品质朗读 ● 批量上传文档 ● 购书5折 ● 5千个文件夹 ● 专属客服 ×支付确认 1. 请在手机上打开的页面进行支付； 2. 如支付完成，请点击“支付完成”。 支付完成 取消支付 |
【本文地址】